import React, { useState } from 'react';
import request from '@/http';
import { DatePicker, Form, message } from 'antd';
import { Select } from 'antd';
import { Button } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import '../mark/index.css';
import { Tabs } from 'antd';
import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
import { Link } from 'umi';
const { TabPane } = Tabs;
const columns = [
  {
    title: '院系',
    dataIndex: 'address',
  },
  {
    title: '项目名称',
    dataIndex: 'address',
  },
  {
    title: '责任老师',
    dataIndex: 'address',
  },
  {
    title: '小组',
    dataIndex: 'address',
  },
  {
    title: '学生姓名',
    dataIndex: 'address',
  },
  {
    title: '性别',
    dataIndex: 'address',
  },
  {
    title: '学号',
    dataIndex: 'address',
  },
  {
    title: '项目角色',
    dataIndex: 'address',
  },
  {
    title: '专业',
    dataIndex: 'address',
  },
  {
    title: '操作',
    dataIndex: 'address',
    render: (row: any) => (
      <>
        <Link to="../mark/personalRatingParticulars">查看详情</Link>
      </>
    ),
  },
];
const MarkTnecolumns = [
  {
    title: '院系',
    dataIndex: 'address',
  },
  {
    title: '项目名称',
    dataIndex: 'address',
  },
  {
    title: '责任老师',
    dataIndex: 'address',
  },
  {
    title: '小组',
    dataIndex: 'address',
  },
  {
    title: '小组长',
    dataIndex: 'address',
  },
  {
    title: '项目成员',
    dataIndex: 'address',
  },
  {
    title: '操作',
    dataIndex: 'address',
    render: (row: any) => (
      <>
        <Link to="../mark/teamScore">查看详情</Link>
      </>
    ),
  },
];

const MarkOne = () => {
  const [formObject] = Form.useForm();
  const [searchValue, setSearchValue] = React.useState('');
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const result: any = await request.get(
      '/teacher/leave/queryLeaveByTeacherId',
    );
    console.log(result);

    if (result.msg === 'Success') {
      const data = result.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        completeTime: user.completeTime, //	课程名（项目名称）
        courseName: user.courseName, //
        /*trainTeacherName: user.list.map( (teacher:any) => {  // 遍历教师数组
            return  arr.concat(teacher.trainTeacherName)
          }),*/
        homeworkTheme: user.homeworkTheme,
        publishTime: user.publishTime,
        trainTeacherName: user.trainTeacherName,
        endTime: user.endTime,
        collegeName: user.collegeName,
        majorName: user.majorName,
        gradeName: user.gradeName,
        className: user.className,
        groupName: user.groupName,
        stuNumber: user.stuNumber,
        stuName: user.stuName,
        homeworkType: user.homeworkType,
      }));

      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSizeValue,
        total: result.total, //总条数 分页
      };
      setPagination(newPageObject);
      setDataSource(data);
    }
  };

  const [cMajorData, setCMajorData] = useState<any[]>([]);
  const getMajor = async () => {
    const chooseMajor: any = await request.get(
      '/teacher/homework/queryCourseByTeacherId',
    );
    const cMajor = chooseMajor.data.map((user: any) => ({
      key: `user_${user.id}`,
      id: user.id,
      courseName: user.courseName, //	课程名（项目名称）
    }));
    localStorage.setItem('major', JSON.stringify(cMajor));
    let major = localStorage.getItem('major');
    if (major) {
      setCMajorData(JSON.parse(major));
    }
  };

  //小组
  const [cHeadTeacherData, setCHeadTeacherData] = useState<any[]>([]);
  const getHeadTeacher = async () => {
    const chooseHeadTeacher: any = await request.get('/queryAllGroup');
    const cHeadTeacher = chooseHeadTeacher.map((user: any) => ({
      key: `user_${user.classId}`,
      groupId: user.groupId,
      groupName: user.groupName,
    }));
    localStorage.setItem('headTeacher', JSON.stringify(cHeadTeacher));
    let headTeacher = localStorage.getItem('headTeacher');
    if (headTeacher) {
      setCHeadTeacherData(JSON.parse(headTeacher));
    }
  };

  const searchOnClick = async () => {
    const data = formObject.getFieldsValue();
    console.log(formObject.getFieldsValue());
    console.log(333);
    await loadDataSource(formObject.getFieldsValue(), 1, pagination.pageSize);
  };

  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
    getHeadTeacher(); //小组
    getMajor(); //项目
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  async function userEditOnClose() {
    await loadDataSource(
      formObject.getFieldsValue(),
      pagination.current,
      pagination.pageSize,
    );
  }

  const deleteOnClick = async (user: any) => {
    const result: any = await request.get(
      '/admin/updateCourseById?id=' +
        user.id +
        '&createTime=' +
        user.createTime +
        '&CourseName=' +
        user.CourseName,
    );
    if (result.success) {
      message.success('操作成功！');
      await loadDataSource(
        formObject.getFieldsValue(),
        pagination.current,
        pagination.pageSize,
      );
    }
  };

  const resetOnClick = () => {
    setSearchValue('');
  };
  return (
    <div>
      <div className="Top5">
        <div className="spn">
          项目名字：
          <Select className="sel" size="small" placeholder="请选择">
            {cMajorData.map((item: any, index: any) => {
              return (
                <Option
                  index={index}
                  key={index}
                  value={item.courseName}
                  children={item.courseName}
                ></Option>
              );
            })}
          </Select>
        </div>

        <div className="spn">
          小组名称 :
          <Select placeholder="请选择" size="small" className="sel">
            {cHeadTeacherData.map((item: any, index: any) => {
              return (
                <Option
                  index={index}
                  key={index}
                  value={item.groupName}
                  children={item.groupName}
                ></Option>
              );
            })}
          </Select>
        </div>
      </div>
      <div className="div_but">
        <Button className="bt" size="large" type="primary">
          查询
        </Button>
        <Button size="large" className="bt">
          重置
        </Button>
      </div>
      <div className="box_tab2">
        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={{ pageSize: 5 }}
          scroll={{ y: 400 }}
        />
      </div>
    </div>
  );
};
const MarkTne = () => {
  const [formObject] = Form.useForm();
  const [searchValue, setSearchValue] = React.useState('');
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const result: any = await request.get(
      '/teacher/leave/queryLeaveByTeacherId',
    );
    console.log(result);

    if (result.msg === 'Success') {
      const data = result.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        completeTime: user.completeTime, //	课程名（项目名称）
        courseName: user.courseName, //
        /*trainTeacherName: user.list.map( (teacher:any) => {  // 遍历教师数组
            return  arr.concat(teacher.trainTeacherName)
          }),*/
        homeworkTheme: user.homeworkTheme,
        publishTime: user.publishTime,
        trainTeacherName: user.trainTeacherName,
        endTime: user.endTime,
        collegeName: user.collegeName,
        majorName: user.majorName,
        gradeName: user.gradeName,
        className: user.className,
        groupName: user.groupName,
        stuNumber: user.stuNumber,
        stuName: user.stuName,
        homeworkType: user.homeworkType,
      }));
      const CourseByTeacherId: any = await request.get(
        '/teacher/homework/queryCourseByTeacherId',
      );

      const cGrade = CourseByTeacherId.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        courseName: user.courseName,
      }));
      localStorage.setItem('headTeacher', JSON.stringify(cGrade));

      const chooseGroup: any = await request.get('/queryAllGroup');

      const chGroup = chooseGroup.map((user: any) => ({
        key: `user_${user.classId}`,
        groupId: user.groupId,
        groupName: user.groupName,
      }));
      localStorage.setItem('chGroups', JSON.stringify(chGroup));
      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSizeValue,
        total: result.total, //总条数 分页
      };
      setPagination(newPageObject);
      setDataSource(data);
    }
  };

  let cHeadTeacher = localStorage.getItem('headTeacher');
  if (cHeadTeacher != null) {
    var cHeadTeacherData = JSON.parse(cHeadTeacher);
  }
  const chooseGroups = localStorage.getItem('chGroups');
  if (chooseGroups != null) {
    var chooseGroupData = JSON.parse(chooseGroups);
  }

  const searchOnClick = async () => {
    const data = formObject.getFieldsValue();
    console.log(formObject.getFieldsValue());
    console.log(333);
    await loadDataSource(formObject.getFieldsValue(), 1, pagination.pageSize);
  };

  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  async function userEditOnClose() {
    await loadDataSource(
      formObject.getFieldsValue(),
      pagination.current,
      pagination.pageSize,
    );
  }

  const deleteOnClick = async (user: any) => {
    const result: any = await request.get(
      '/admin/updateCourseById?id=' +
        user.id +
        '&createTime=' +
        user.createTime +
        '&CourseName=' +
        user.CourseName,
    );
    if (result.success) {
      message.success('操作成功！');
      await loadDataSource(
        formObject.getFieldsValue(),
        pagination.current,
        pagination.pageSize,
      );
    }
  };

  const resetOnClick = () => {
    setSearchValue('');
  };
  return (
    <div>
      <div className="Top5">
        <div className="spn">
          项目名字：
          <Select className="sel" size="small" placeholder="请选择">
            {cHeadTeacherData.map((item: any, index: any) => {
              return (
                <Option
                  index={index}
                  key={index}
                  value={item.courseName}
                  children={item.courseName}
                ></Option>
              );
            })}
          </Select>
        </div>

        <div className="spn">
          小组名称 :
          <Select placeholder="请选择" size="small" className="sel">
            {chooseGroupData.map((item: any, index: any) => {
              return (
                <Option
                  index={index}
                  key={index}
                  value={item.groupName}
                  children={item.groupName}
                ></Option>
              );
            })}
          </Select>
        </div>
      </div>
      <div className="div_but">
        <Button className="bt" size="large" type="primary">
          查询
        </Button>
        <Button size="large" className="bt">
          重置
        </Button>
      </div>
      <div className="box_tab2">
        <Table
          columns={MarkTnecolumns}
          pagination={{ pageSize: 5 }}
          scroll={{ y: 400 }}
        />
      </div>
    </div>
  );
};
const mark = () => {
  return (
    <Tabs defaultActiveKey="1">
      <TabPane
        tab={
          <span>
            <AppleOutlined />
            个人评分
          </span>
        }
        key="1"
      >
        <MarkOne />
      </TabPane>
      <TabPane
        tab={
          <span>
            <AndroidOutlined />
            小组评分
          </span>
        }
        key="2"
      >
        <MarkTne />
      </TabPane>
    </Tabs>
  );
};

export default mark;
